<div id="content_header">
  <h3>Unpaid items</h3>
</div>

<!-- SLIDE PANEL - DISCOUNTS -->
<pageslide ps-size="70%" ps-speed="0.25" ps-auto-close="true" ps-open="psDiscounts">
  <div style="padding:20px">
    <h3>Manage Discounts - <small class="text-muted">{{ Disc.params.studentName }}</small> <a href="" ng-click="psDiscounts = !psDiscounts"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="alert alert-danger" ng-show="errors.StudentDiscounts">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          <p>{{ errors.StudentDiscounts[0] }}</p>
        </div>
        <table class="table table-condensed table-hover">
          <thead>
            <tr>
              <th></th>
              <th>Name</th>
              <th>Amount</th>
              <th>Percentage</th>
              <th>Validity</th>
              <th>Published In</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr dir-paginate="discount in discounts | itemsPerPage: pagesize" total-items="Disc.totalItems" pagination-id="cust" ng-if="discount.Invoice"> -->
            <tr ng-repeat="discount in discounts" ng-if="!discount.Invoice">
              <td><input type="checkbox" ng-checked="checkSelected(discount.Id)" ng-click="toggleDiscount(discount)" ng-if="!discount.Invoice"></td>
              <td ng-class="{'text-muted': discount.Invoice}">
                {{ discount.DiscountType.Name }}
                <br>
                <small>{{ discount.ValidFrom | date:'mediumDate' }} - {{ discount.ValidUntil | date:'mediumDate' }}</small>
              </td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ discount.Amount ? (discount.Amount | currency:'Rp. ') : '-' }}</td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ discount.Percentage ? discount.Percentage+'%' : '-' }}</td>
              <td ng-class="{'text-muted': discount.Invoice}"><span class="label label-success" ng-if="discount.IsValid">Valid</span><span class="label label-warning" ng-if="!discount.IsValid">expired</span></td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ ((discount.PublishedInTermNumber) && (discount.PublishedInTermNumber > 0)) ? (discount.PublishedInTermNumber + '/' + discount.PublishedInTermYear) : '-' }}</td>
            </tr>
          </tbody>
        </table>
        <!-- <dir-pagination-controls on-page-change="pageChangedDisc(newPageNumber)" pagination-id="cust" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls> -->
      </div>
    </div>
    <button class="btn btn-primary" ng-click="submitDiscount()">Submit</button>
  </div>
</pageslide>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
    <form class="form-vertical" ng-submit="searchInvoices()">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Search For {{ (params.invoice_type) ? '('+getLabelFilter(InvoiceTypes, params.invoice_type)+')' : '(All)' }} <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <!-- PAYMENT TYPE -->
            <li role="presentation" class="dropdown-header">Invoice For</li>
            <li ng-class="{active: params.invoice_type===''}"><a href="" ng-click="params.invoice_type=''">All</a></li>
            <li ng-repeat="type in InvoiceTypes" ng-class="{active: params.invoice_type===type.Query}">
              <a href ng-click="params.invoice_type=type.Query">{{ type.Label }}</a>
            </li>
          </ul>
        </div>
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Order By ({{ getLabelOrder(params.order_type) }}) <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <!-- PAYMENT TYPE -->
            <li ng-class="{active: params.order_type === 'DESC'}">
              <a href ng-click="orderUnpaid('DESC')">Newest First</a>
            </li>
            <li ng-class="{active: params.order_type === 'ASC'}">
              <a href ng-click="orderUnpaid('ASC')">Oldest First</a>
            </li>
          </ul>
        </div>
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="params.student_name">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th></th>
          <th>SID</th>
          <th>Student</th>
          <th>Item</th>
          <th>Total Amount</th>
          <th>Total Discount</th>
          <th>Payment</th>
        </tr>
      </thead>
      <tbody>
        <tr dir-paginate="invoice in invoices | itemsPerPage: pagesize" total-items="totalItems">
          <td><input type="checkbox" name="selectedFruits[]" ng-checked="checkSelected(invoice.Id)" ng-click="toggleSelection(invoice)" ng-if="!invoice.Payment"></td>
          <td>
            <span ng-if="invoice.InvoiceType == 0" ng-bind-html="invoice.PlacementTest.Student.SID"></span>
            <span ng-if="invoice.InvoiceType == 1" ng-bind-html="invoice.Enrollment.Student.SID"></span>
            <span ng-if="invoice.InvoiceType == 2" ng-bind-html="invoice.MakeUpTest.Enrollment.Student.SID"></span>
          </td>
          <td>
            <span ng-if="invoice.InvoiceType == 0" ng-bind-html="invoice.PlacementTest.Student.FullName | makeBold:params.student_name"></span>
            <span ng-if="invoice.InvoiceType == 1" ng-bind-html="invoice.Enrollment.Student.FullName | makeBold:params.student_name"></span>
            <span ng-if="invoice.InvoiceType == 2" ng-bind-html="invoice.MakeUpTest.Enrollment.Student.FullName | makeBold:params.student_name"></span>
          </td>
          <!-- <td>{{ InvoiceTypes[invoice.InvoiceType].Label }}</td> -->
          <td>
            <span ng-if="invoice.InvoiceType == 0">
              <small>
                <span class="label label-info">PT</span>
                PT on {{ invoice.PlacementTest.DateTime | date:'fullDate' }}
              </small>
            </span>
            <span ng-if="invoice.InvoiceType == 1">
              <small>
                <span class="label label-success">Enrollment</span>
                {{ invoice.Enrollment.CourseSchedule.CourseName }}
              </small>
            </span>
            <span ng-if="invoice.InvoiceType == 2">
              <small>
                <span class="label label-warning">MUT</span>
                <strong>{{ MakeUpTestTypes[invoice.MakeUpTest.Type].Label }}</strong> {{ invoice.MakeUpTest.MakeUpTestSchedule.DateTime | date:'medium'  }}
              </small>
            </span>
          </td>
          <td>{{ invoice.TotalAmount | currency: 'Rp. ' }}</td>
          <td>{{ invoice.TotalDiscount ? (invoice.TotalDiscount | currency:'Rp. ') : 'No Discount'  }} | <a href ng-click="manageDiscount(invoice)"><small>Manage Discount</small></a></td>
          <td><a href ui-sref="payments.new({ id:invoice.Payment.Id })" ng-if="invoice.Payment">{{ invoice.Payment.TransactionNumber }}</a>{{ invoice.Payment? '' : '-' }}</td>
        </tr>
      </tbody>
      <tfoot>
        <th></th>
        <th colspan="5"><button type="button" class="btn btn-primary" ng-disabled="selectedInvoice.length < 1" ng-click="payInvoice()">Pay Selected Items</button></th>
      </tfoot>
    </table>
    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
  </div>
</div>